import 'package:flutter/material.dart';
import 'package:demo_xm/ui/page/home/HomePagerWidget.dart';
import 'package:demo_xm/ui/page/home/HomeClassifyWidget.dart';
import 'package:demo_xm/ui/page/home/HomeFollowWidget.dart';
import 'package:demo_xm/ui/page/home/HomeMineWidget.dart';
import 'package:flutter/services.dart';

int _selectItem = 3;

final List<Widget> pageList = [
  HomePagerWidget(),
  HomeClassifyWidget(),
  HomeFollowWidget(),
  HomeMineWidget()
];


class MyHomePage extends StatefulWidget {
  const MyHomePage(String s, {Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.

    //默认状态栏有个蒙罩，需要一下设置(除半透明状态栏)
    SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(statusBarColor:Colors.transparent);
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);

    Widget getSelectPage(int index) {
      return Offstage(
        offstage: _selectItem != index,

        // child: pageList[index],

        // 使用TickerMode 可以停止动画 Offstage不能主动停止动画
        child:TickerMode(
          child: pageList[index],
          enabled: _selectItem == index,
        ),
      );
    }

    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        backgroundColor: Colors.white,
        toolbarHeight: 0,
      ),
      backgroundColor: Colors.white,
      body: Stack(
        children: [
          getSelectPage(0),
          getSelectPage(1),
          getSelectPage(2),
          getSelectPage(3),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Image(
                width: 24,
                height: 24,
                image: AssetImage('images/home/xm_tabbar_mine_normal@3x.png')),
            activeIcon: Image(
                width: 24,
                height: 24,
                image:
                AssetImage('images/home/xm_tabbar_home_selected@3x.png')),
            label: "首页",
          ),
          BottomNavigationBarItem(
              icon: Image(
                  width: 24,
                  height: 24,
                  image:
                  AssetImage('images/home/xm_tabbar_group_normal@3x.png')),
              activeIcon: Image(
                  width: 24,
                  height: 24,
                  image: AssetImage(
                      'images/home/xm_tabbar_group_selected@3x.png')),
              label: "分组"),
          BottomNavigationBarItem(
              icon: Image(
                  width: 24,
                  height: 24,
                  image:
                  AssetImage('images/home/xm_tabbar_follow_normal@3x.png')),
              activeIcon: Image(
                  width: 24,
                  height: 24,
                  image: AssetImage(
                      'images/home/xm_tabbar_follow_sekected@3x.png')),
              label: "关注"),
          BottomNavigationBarItem(
              icon: Image(
                  width: 24,
                  height: 24,
                  image:
                  AssetImage('images/home/xm_tabbar_mine_normal@3x.png')),
              activeIcon: Image(
                  width: 24,
                  height: 24,
                  image:
                  AssetImage('images/home/xm_tabbar_mine_selected@3x.png')),
              label: "我的")
        ],
        currentIndex: _selectItem,
        onTap: (int index) {
          setState(() {
            _selectItem = index;
          });
        },
        type: BottomNavigationBarType.fixed,
      ),
    );
  }
}
